<template>
  <div id="detail">
    <detail-nav-bar class="detail-nav"
                    @titleClick="titleclick"
                    ref="nav"></detail-nav-bar>
    <scroll class="content"
            ref="scroll"
            @scroll="contentScroll"
            :probe-type="3">
      <detail-swiper :top-images="topImages"></detail-swiper>
      <detail-base-info :goods="goods"></detail-base-info>
      <detail-shop-info :shop="Shop"></detail-shop-info>
      <detail-goods-info :detail-info="detailInfo"
                         @imageLoad="imageLoad"/>
      <detail-param-info ref="params"
                         :param-info="paramInfo"/>
      <detail-comment-info ref="comments"
                           :comment-info="commentInfo"/>
      <goodslist ref="recommends"
                 :goods="Recommends"/>
    </scroll>
    <back-top @click.native="backclick"
              v-show="isShowBackTop"/>
    <detail-bottom-bar @addCart="addToCart"/>
  </div>
</template>

<script>
import detailNavBar from "./childcomponents/detailNavBar";
import detailSwiper from "./childcomponents/detailSwiper";
import detailBaseInfo from "./childcomponents/detailBaseInfo";
import detailShopInfo from "./childcomponents/detailShopInfo";
import scroll from "components/common/scroll/scroll";
import detailGoodsInfo from "./childcomponents/detailGoodsInfo";
import detailParamInfo from "./childcomponents/detailParamInfo";
import detailCommentInfo from "./childcomponents/detailCommentInfo";
import detailBottomBar from "./childcomponents/detailBottomBar";
import goodslist from "components/content/goods/goodslist";
import {getDetail, Goods, Shop, GoodsParam, getRecommend} from "network/detail";
import {itemListenerMixin, backtopMixin} from "common/mixin";
import {debounce} from "common/utils";
// import toast from "components/common/toast/toast";

export default {
  name: "detail",
  components:
    {
      detailSwiper,
      detailNavBar,
      detailBaseInfo,
      detailShopInfo,
      detailParamInfo,
      scroll,
      detailCommentInfo,
      detailGoodsInfo,
      goodslist,
      detailBottomBar,
      // toast
    },
  mixins: [itemListenerMixin, backtopMixin],
  data() {
    return {
      iid: null,
      topImages: [],
      goods: {},
      Shop: {},
      detailInfo: {},
      paramInfo: {},
      commentInfo: {},
      Recommends: [],
      themeTopYs: [],
      getThemeTop: null,
      currentIndex: 0,
      message:'',
      show:false
    }
  },
  created() {
    this.iid = this.$route.params.iid
    getDetail(this.iid).then(res => {
      const data = res.result
      this.topImages = res.result.itemInfo.topImages

      this.goods = new Goods(data.itemInfo, data.columns, data.shopInfo.services)

      this.Shop = new Shop(data.shopInfo)

      this.detailInfo = data.detailInfo

      this.paramInfo = new GoodsParam(data.itemParams.info, data.itemParams.rule)

      if (data.rate.cRate !== 0) {
        this.commentInfo = data.rate.list[0]
      }
      // this.$nextTick(() => {
      //   this.themeTopYs.push(0);
      //   this.themeTopYs.push(this.$refs.params.$el.offsetTop)
      //   this.themeTopYs.push(this.$refs.comments.$el.offsetTop)
      //   this.themeTopYs.push(this.$refs.recommends.$el.offsetTop)
      // })
    })
    getRecommend().then(res => {
      this.Recommends = res.data.list
    })
    this.getThemeTop = debounce(() => {
      this.themeTopYs = []
      this.themeTopYs.push(0);
      this.themeTopYs.push(this.$refs.params.$el.offsetTop)
      this.themeTopYs.push(this.$refs.comments.$el.offsetTop)
      this.themeTopYs.push(this.$refs.recommends.$el.offsetTop)
    }, 10)
  },
  methods: {
    imageLoad() {
      this.$refs.scroll.Refresh()
      this.getThemeTop()
    },
    titleclick(index) {
      this.$refs.scroll.scrollTo(0, -this.themeTopYs[index], 100)
    },
    contentScroll(position) {
      this.isShowBackTop = position.y < -1000;
      const positionY = -position.y
      if (positionY >= this.themeTopYs[0] && positionY < this.themeTopYs[1]) {
        if (this.currentIndex !== 0) {
          this.currentIndex = 0
          this.$refs.nav.currentIndex = this.currentIndex
        }
      } else if (positionY >= this.themeTopYs[1] && positionY < this.themeTopYs[2]) {
        if (this.currentIndex !== 1) {
          this.currentIndex = 1
          this.$refs.nav.currentIndex = this.currentIndex
        }
      } else if (positionY >= this.themeTopYs[2] && positionY < this.themeTopYs[3]) {
        if (this.currentIndex !== 2) {
          this.currentIndex = 2
          this.$refs.nav.currentIndex = this.currentIndex
        }
      } else {
        if (this.currentIndex !== 3) {
          this.currentIndex = 3
          this.$refs.nav.currentIndex = this.currentIndex
        }
      }
    },
    addToCart() {
      const product = {}
      product.image = this.topImages[0]
      product.title = this.goods.title
      product.desc = this.goods.desc
      product.price = this.goods.realPrice
      product.iid = this.iid
      this.$store.dispatch('addCart', product).then(res => {
        // this.show=true
        // this.message=res
        // setTimeout(()=>{
        //   this.show=false
        //   this.message=''
        // },1500)
        this.$toast.show(res,1500)
      })
    }
  },
  computed: {},
  mounted() {

  },
  destroyed() {
    this.$bus.$off('itemImageLoad', this.itemImglistener)
  }
}
</script>

<style scoped>
#detail {
  position: relative;
  z-index: 9;
  background-color: #fff;
  height: 100vh;
}

.content {
  height: calc(100% - 44px - 49px);
}

.detail-nav {
  position: relative;
  z-index: 9;
  background-color: #fff;
}
</style>
